<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside
        class="aside"
        :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
      >
        <el-menu
          id="cc"
          router
          text-color="#ccc"
          active-text-color="#9c1d12"
          :default-active="$route.path"
          :style="{ height: '100vh' }"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
        >
          <el-menu-item>
            <template slot="title">
              <img
                width="100px"
                style="margin-left: -20px; height: 100%"
                src="../img/logo.jpg"
                alt=""
              />
              <span style="font-size: 1.2em; color: #000; font-weight: bold"
                >商家后台</span
              >
            </template>
          </el-menu-item>
          <div id="mm">
            <el-menu-item index="/home/index">
              <i class="el-icon-message"></i>
              <template slot="title"> 首页 </template>
            </el-menu-item>
            <!-- 商品 -->
            <el-submenu index="/home/com">
              <template slot="title">
                <i class="el-icon-shopping-bag-1"></i>
                <span slot="title">商品</span>
              </template>
              <el-menu-item index="/home/com-list">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">店铺商品</span>
              </el-menu-item>
              <el-menu-item index="/home/com-add">
                <i class="el-icon-plus"></i>
                <span slot="title">添加商品</span>
              </el-menu-item>
            </el-submenu>

            <!-- 订单 -->

            <el-menu-item index="/home/order-list">
              <i class="el-icon-notebook-2"></i>订单列表</el-menu-item
            >
            <!-- 物流 -->

            <el-menu-item index="/home/my-log"
              ><i class="el-icon-truck"></i>我的物流</el-menu-item
            >
            <!-- 用户 -->

            <el-menu-item index="/home/user-list">
              <i class="el-icon-s-custom"></i>用户列表</el-menu-item
            >
            <!-- 门店 -->
            <el-submenu index="/home/shop">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">门店管理</span>
              </template>
              <el-menu-item index="/home/shop">
                <i class="el-icon-location"></i>
                <span slot="title">门店列表</span>
              </el-menu-item>
              <el-menu-item index="/home/shop-add">
                <i class="el-icon-plus"></i>
                <span slot="title">添加门店</span>
              </el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i
            v-show="!isCollapse"
            class="el-icon-s-fold"
            @click="isCollapse = true"
          ></i>
          <i
            v-show="isCollapse"
            class="el-icon-s-unfold"
            @click="isCollapse = false"
          ></i>
          <!-- 面包屑导航 -->
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="cc">
            <el-breadcrumb-item v-for="item in $route.meta.nav" :key="item"
              >{{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb> -->
          <div></div>
          <span v-if="user" style="color: #333; font-size: 16px">{{
            user
          }}</span>
          <span v-else>未登录</span>
        </el-header>

        <el-main class="right">
          <!-- 二级路由 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      user: "",
    };
  },

  mounted() {
    // sessionStorage
    // console.log(sessionStorage.getItem('user'))
    let a = sessionStorage.getItem("user");
    this.user = JSON.parse(a).nickname;
    // console.log(this.user)
  },
};

// mounted() {
//   var uploadedDataURL = ROOT_PATH + "/data-gl/asset/data/flights.json";
//   myChart.showLoading();
//   $.getJSON(uploadedDataURL, function (data) {
//     myChart.hideLoading();
//     function getAirportCoord(idx) {
//       return [data.airports[idx][3], data.airports[idx][4]];
//     }
//     var routes = data.routes.map(function (airline) {
//       return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
//     });
//     myChart.setOption({
//       geo3D: {
//         map: "world",
//         shading: "realistic",
//         silent: true,
//         environment: "#333",
//         realisticMaterial: {
//           roughness: 0.8,
//           metalness: 0,
//         },
//         postEffect: {
//           enable: true,
//         },
//         groundPlane: {
//           show: false,
//         },
//         light: {
//           main: {
//             intensity: 1,
//             alpha: 30,
//           },
//           ambient: {
//             intensity: 0,
//           },
//         },
//         viewControl: {
//           distance: 70,
//           alpha: 89,
//           panMouseButton: "left",
//           rotateMouseButton: "right",
//         },
//         itemStyle: {
//           color: "#000",
//         },
//         regionHeight: 0.5,
//       },
//       series: [
//         {
//           type: "lines3D",
//           coordinateSystem: "geo3D",
//           effect: {
//             show: true,
//             trailWidth: 1,
//             trailOpacity: 0.5,
//             trailLength: 0.2,
//             constantSpeed: 5,
//           },
//           blendMode: "lighter",
//           lineStyle: {
//             width: 0.2,
//             opacity: 0.05,
//           },
//           data: routes,
//         },
//       ],
//     });
//     window.addEventListener("keydown", function () {
//       myChart.dispatchAction({
//         type: "lines3DToggleEffect",
//         seriesIndex: 0,
//       });
//     });
//   });
// },
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  border-bottom: 1px solid #ccc;

  > div {
    flex: 1;
  }

  i {
    font-size: 1.3em;
  }

  .cc {
    margin-left: 20px;
    flex: 1;
  }
}

.aside::-webkit-scrollbar {
  display: none;
  ::v-deep > span {
    color: #010101;
  }
}

::v-deep .el-menu {
  background-color: #010101;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.right {
  background: #f5f5f5;
}

#cc {
  > li {
    background-color: white;
    display: flex;
  }
}

// ::v-deep .el-menu-vertical-demo {
//   background-color: skyblue;
// }
</style>
